<template>
  <div>
    <!-- 头像区域 -->
    <div class="profile-box">
      <!-- 头像 -->
      <!-- vant组件有个特点，他标签名叫什么就一定有一个class也叫什么 -->
      <van-image round fit="cover" :src="userInfo.photo" />
      <div class="text-box">
        <h4>{{ userInfo.name }}</h4>
        <span>{{ userInfo.birthday }}</span>
      </div>
    </div>
    <!-- 快捷工具 -->
    <van-row>
      <van-col span="8">
        <van-icon color="#3296fa" name="newspaper-o" />
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon color="red" name="star-o" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon color="orange" name="tosend" />
        <span>阅读历史</span>
      </van-col>
    </van-row>

    <!-- 四个cell -->
    <van-cell-group>
      <van-cell to="/mine/edit" is-link icon="edit" title="编辑资料" />
      <van-cell to="/mine/chat" is-link icon="chat-o" title="小智同学" />
      <van-cell is-link icon="setting-o" title="系统设置" />
      <van-cell
        @click="$store.commit('logout')"
        is-link
        icon="info-o"
        title="退出登录"
      />
    </van-cell-group>
  </div>
</template>

<script>
// 使用mapState
import { mapState } from "vuex";

export default {
  name: "mine",
  computed: {
    // userInfo () {
    //   return this.$store.state.userInfo
    // }
    // 下面这句话相当于写上面的这个计算属性
    ...mapState(["userInfo"]),
  },

  created() {
    this.$store.dispatch("reqUserInfo");
  },
};
</script>

<style lang="less" scoped>
.profile-box {
  height: 140px;
  background-color: #3296fa;
  display: flex;
  align-items: center;

  .van-image {
    width: 100px;
    height: 100px;
    margin: 0 10px 0 20px;
  }

  .text-box {
    h4 {
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    span {
      background-color: #fff;
      color: #3296fa;
      padding: 3px 5px;
    }
  }
}

.van-row {
  .van-col {
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .van-icon {
      font-size: 30px;
      margin-bottom: 5px;
    }
  }
}
</style>